<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar :text="text1"></uv-notice-bar>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">可关闭</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar :text="text5" mode="closable"></uv-notice-bar>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义横向滚动速度</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar :text="text2" speed="250" mode="closable"></uv-notice-bar>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">可跳转(点击右箭头)</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar
               :text="text3"
               mode="link"
               url="/pages/componentsD/tag/tag"
            ></uv-notice-bar>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横向步进滚动</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar :text="text4" :step="true" @click="click"></uv-notice-bar>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">纵向滚动</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar :text="text4" direction="column" @click="click"></uv-notice-bar>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义样式</text>
         <view class="uv-demo-block__content">
            <uv-notice-bar :text="text1" color="#ffffff" bgColor="#f56c6c"></uv-notice-bar>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const text1 = ref('这是一个消息通知');
const text2 = ref('这是一个消息通知');
const text3 = ref('这是一个消息通知');
const text4 = ref(['这是一个消息通知', '这是一个消息通知1', '这是一个消息通知2,这是一个消息通知3']);
const text5 = ref('这是一个消息通知');
const click = () => {
   console.log('click');
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';

.uv-demo-block__content {
   @include flex(column);
}
</style>
